<page-header *ngIf="device"
             [breadcrumb]="breadcrumb"
             [title]="device.deviceName">
    <ng-template #breadcrumb>
        <nz-breadcrumb>
            <nz-breadcrumb-item><a [routerLink]="'/deviceManager/devices'">设备管理</a></nz-breadcrumb-item>
            <nz-breadcrumb-item><a>设备详情</a></nz-breadcrumb-item>
        </nz-breadcrumb>
    </ng-template>
</page-header>
<nz-spin *ngIf="storeSrv.http.loading"
         class="modal-spin"></nz-spin>
<nz-card *ngIf="device">
    <nz-card-tab>
        <nz-tabset (nzSelectChange)="tabSelect($event)"
                   [nzSize]="'large'">
            <nz-tab nzTitle="设备信息">
                <table class="table table-bordered">

                    <td rowspan="6" width="120">
                        <img height="120"
                             src=""
                             width="120">
                        <span style="width: 100%; text-align: center">补货二维码</span>
                    </td>

                    <tr>
                        <th>设备标识</th>
                        <td width="180">
                            <div class="row">
                                <ellipsis length="10">{{ device.deviceId }}</ellipsis>
                                &nbsp; <a (click)="copy(device.deviceId)">复制</a></div>
                        </td>
                        <th>设备名称</th>
                        <td>{{device.deviceName}}&nbsp; <a (click)="copy(device.deviceSecret)">修改</a></td>
                        <th>设备型号</th>
                        <td>大机器</td>
                    </tr>
                    <tr>
                        <th>设备秘钥</th>
                        <td>
                            <div class="row">
                                <ellipsis length="10">{{ device.deviceSecret }}</ellipsis>
                                &nbsp; <a (click)="copy(device.deviceSecret)">复制</a></div>
                        </td>
                        <th>当前状态</th>
                        <td>未激活</td>
                        <th>IP地址</th>
                        <td>{{device.ipAddress}}</td>
                    </tr>
                    <tr>
                        <th>添加时间</th>
                        <td>{{device.createdDate |date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <th>激活时间</th>
                        <td>{{device.activeDate |date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <th>最后上线时间</th>
                        <td>{{device.onlineDate |date:'yyyy-MM-dd HH:mm:ss'}}</td>
                    </tr>
                    <tr>
                        <th>所在省/市</th>
                        <td>{{device.address?.province?.name}}</td>
                        <th>所在市/区</th>
                        <td>{{device.address?.city?.name}}</td>
                        <th>所在区/县</th>
                        <td>{{device.address?.district?.name}}</td>
                    </tr>
                    <tr>
                        <th>当前库存</th>
                        <td>99</td>
                        <th>设备位置</th>
                        <td colspan="3">{{device.address?.address}}</td>
                    </tr>
                </table>
                <nz-divider nzOrientation="left" nzText="设备商家信息"></nz-divider>
                <!--                <nz-card [nzExtra]="editSt"-->
                <!--                         [nzTitle]="'设备商家信息'" nzBordered="false">-->
                <ng-template #editSt>
                    <button (click)="editStore()" nz-button nzType="link">修改商家</button>
                </ng-template>
                <table *ngIf="store$ | async as store" class="table table-bordered">
                    <tr>
                        <th>商家名称</th>
                        <td>
                            <div><span>{{store.name}}  </span>
                            </div>
                        </td>
                        <th>联系人</th>
                        <td>
                            <div><span>{{store.contact}}</span></div>
                        </td>
                        <th>商家地址</th>
                        <td>
                            <div><span>{{store.address?.address}}</span></div>
                        </td>

                    </tr>
                </table>
                <!--                </nz-card>-->
            </nz-tab>
            <nz-tab acl="" nzTitle="提成信息">
                
            </nz-tab>
            <nz-tab nzTitle="补货记录">
            </nz-tab>
            <nz-tab nzTitle="事件日志">
                <nz-card [nzBordered]="false">

                    <ng-template #logExt>
                        <sf (formReset)="logSt.reset($event)" (formSubmit)="logSt.reset($event)"
                            [schema]="logSearchSchema"
                            mode="search"></sf>
                    </ng-template>

                    <st #logSt
                        [bordered]="true"
                        [columns]="logColumns"
                        [data]="logUrl"
                        [expand]="expand"
                        [header]="logExt"
                        expandAccordion
                        expandRowByClick>
                        <ng-template #expand let-column="column" let-index="index" let-item>
                            {{item.payload}}
                            <!--                            <sv-container labelWidth="150" *ngIf="item.msgType ==='Status'">-->
                            <!--                                <sv label="时间">{{item.payload.time | date}}</sv>-->
                            <!--                                <sv label="设备IP">{{item.payload.clientIp}}</sv>-->
                            <!--                                <sv label="状态">-->
                            <!--                                    <ng-container *ngIf="item.payload.status === 'online'; else offline">-->
                            <!--                                        <nz-tag [nzColor]="'#87d068'">在线</nz-tag>-->
                            <!--                                    </ng-container>-->
                            <!--                                    <ng-template #offline>-->
                            <!--                                        <nz-tag [nzColor]="'#f50'">离线</nz-tag>-->
                            <!--                                    </ng-template>-->
                            <!--                                </sv>-->
                            <!--                            </sv-container>-->
                        </ng-template>
                    </st>
                </nz-card>
            </nz-tab>
        </nz-tabset>
    </nz-card-tab>
</nz-card>

<nz-modal
        (nzOnCancel)="handleCancel()"
        (nzOnOk)="reload($event)"
        [(nzVisible)]="showStore"
        [nzCancelText]="'取消'"
        [nzClosable]="true"
        [nzContent]="modalContent"
        [nzOkText]="'确定'"
        [nzTitle]="'修改商家'">
    <ng-template #modalContent>
        <nz-select [(ngModel)]="device.storeId"
                   name="storeId"
                   nzAllowClear
                   nzPlaceHolder="选择商家"
                   nzServerSearch
                   nzShowSearch
                   style="width: 100%">
            <nz-option *ngFor="let o of stores$ | async" [nzLabel]="o.name" [nzValue]="o.id"></nz-option>
        </nz-select>
        <!--        <nz-select nzPlaceHolder="选择商家"-->
        <!--                   style="width: 100%"-->
        <!--                   name="storeId"-->
        <!--                   nzShowSearch-->
        <!--                   nzServerSearch-->
        <!--                   nzAllowClear>-->
        <!--            <nz-option *ngFor="let o of stores$ | async" [nzValue]="o.id" [nzLabel]="o.name"></nz-option>-->
        <!--        </nz-select>-->
    </ng-template>
</nz-modal>
